<template>
    <a-select
      show-search
      placeholder="输入选择"
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
      :options="list"
      @search="handleSearch"
      @change="handleChange"
    >
      <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    </a-select>
</template>

<script>
import { levelListByNoAuth } from '@/api/noAuth'

export default {
  data() {
    return {
      list: [],
      fetching: false,
    }
  },

  components: {},
  props: {
    form: {
      type: Object,
      require: true
    },
    keyStr: {
      type: String,
      require: true
    }
  },
  mounted() {
    
  },
  computed: {},
  watch: {},
  methods: {
    handleSearch(a_val, a_id, a_init){
      let data = { name: a_val, pageNum: 1, pageSize: a_init?10:100, id: a_id }
      this.fetching = true
      levelListByNoAuth(data).then(res=>{
        this.list = res.data.data.map((v) => {
            return {
              label: v.name,
              value: v.id,
            }
          })
      }).finally(()=>this.fetching = false)
    },
    handleChange(val){
      console.log(val)
      let data = {}
      data[this.keyStr] = val
      this.form.setFieldsValue(data)
    }
  },
  destroyed() {},
}
</script>